<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Chapter 2: I Must Be Dreaming</title>

<link rel="shortcut icon" href="images/2reading.gif">
<link href="foti.css" rel="stylesheet" type="text/css">

<style type="text/css">
#canvas {
	margin: 10px auto 0 auto;
	border: 5px double #aa9e8c;
}

#bg, #char {display: none;}


</style>

<script type="text/javascript">
var vc, vctx, vi1, bgr;
	function init(){
		vc = document.getElementById("canvas");
		vctx = vc.getContext("2d"); 
		bgr = document.getElementById("bg");
		vi1 = document.getElementById("char");
		setInterval("animation()",800);
	}

	var dax = 0; counter=0;
	function animation() {
		if (counter >= 9) counter = 0; else counter++;
		vctx.drawImage(bgr,0,0,800,600);
		vctx.drawImage(vi1,dax,0,500,450, 60, 0, 700, 650);
		dax = 500 * counter;
	}
	

  
</script>

</head>
<body onload="init()">

	<h1>Figment of the Imagination</h1>
	<h2>Chapter 2: I Must Be Dreaming</h2>
	<h2>Scene 4: Precious Phone</h2>


<center><img src="images/line divider.png" width=800 style="opacity: .7;"></center>

<div id="content">

<center><canvas id="canvas" width=800 height=600></canvas></center>
<img id="bg" src="images/ch2/corner.png" width=800 height=600>
<img id="char" src="images/ch2/iphone.png">

<center><img src="images/photo.png" width=800 style="margin:-4px 0 0 0;"></center>

<div id="scenetext">
<p>
It must be a negative 32 degrees. Her companion has not left. It's starting to frighten her. She slid 
her hand inside her trousers' back pocket and felt something. Her phone was there all this time! "How 
could I forget you when you are desperately needed?" she asked herself. Before Ada could pull it out of 
her pants' compartment, the person was already standing adjacent to her. Ada could feel her spine 
tightening, hair in every place erected. 
</p>

<center><img src="images/line divider.png" width=800 style="opacity: .7;"></center>
	
</div>

<div align="center" style="padding-bottom: 30px;">
<a href="Chapter2Scene3.jsp" title="Chillin' Like A Villain"><button id="button">BACK</button></a>
<a href="tableofcontent.jsp" title="Back to Table of Contents"><button id="button2">TABLE OF CONTENTS</button></a>
<a href="Chapter2Scene5.jsp" title="Flashlight Substitute"><button id="button">NEXT</button></a>
</div>

</div>


</body>
</html>

